import React from 'react'
import PropTypes from 'prop-types'
import DataSet from '@antv/data-set'
import { Chart, Geom, Axis, Tooltip, Coord, Legend } from 'bizcharts'

class ChartTimeBar extends React.PureComponent {

  render() {

    const { data, forceFit, width, height, onPlotClick, GeomColor } = this.props

    const ds = new DataSet()
    const dv = ds.createView().source(data)

    // Coord  scale={[1, -1]}
    return (
      <Chart 
        onPlotClick={onPlotClick} 
        width={width} 
        height={height} 
        data={dv} 
        forceFit={forceFit}
      >
        <Legend />
        <Coord transpose />
        <Axis 
          name="name" 
          label={{
            offset: 44,
            textStyle: { textAlign: 'center' },
            htmlTemplate: text => {
              const index = text.lastIndexOf('@')
              const end = index === -1 ? text.length : index
              return `<div style="width: 70px; text-align: center">${text.substr(0, end)}</div>`
            }
          }}
        />
        <Axis 
          name="range"
          label={{textStyle: {textAlign: 'start'}}}
          grid={null}
        />
        <Tooltip itemTpl='<tr class="g2-tooltip-list-item"><td style="color:{color}">{name}</td><td>&nbsp;&nbsp;{value}</td></tr>' />
        <Geom type="interval" color={['status', GeomColor]} position="name*range" />
      </Chart>
    )
  }

}

ChartTimeBar.propTypes = {
  data: PropTypes.array,
  forceFit: PropTypes.bool,
  width: PropTypes.number,
  height: PropTypes.number,
  GeomColor: PropTypes.array,
  onPlotClick: PropTypes.func,
}

ChartTimeBar.defaultProps = {
  data: [],
  forceFit: true,
  width: 500,
  height: 300,
  GeomColor: [],
  onPlotClick: () => {}
}

export default ChartTimeBar